<template>
  <div style="background-color: #f5f5f5">
    <scroll-view style="background-color: #f5f5f5">
      <div class="card">
        <div style="display: flex; flex-direction: row">
          <img
            src="https://img.zcool.cn/community/012db65543065f0000019ae9c9b0b2.jpg@1280w_1l_2o_100sh.jpg"
            style="
              width: 124px;
              height: 104px;
              object-fit: contain;
              border-radius: 5px;
            "
          />
          <div
            style="
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              align-items: start;
              padding-left: 10px;
            "
          >
            <div>
              <text class="titleText">{{
                '暗杀计划的看哈空间数据库的黑科技'
              }}</text>
            </div>
            <div style="height: 10px"></div>
            <div>
              <div>
                <text class="subText"
                  >活动时间：{{ '暗杀计划的看哈空间数据库的黑科技' }}</text
                >
              </div>
              <div>
                <text class="subText"
                  >活动地点：{{ '暗杀计划的看哈空间数据库的黑科技' }}</text
                >
              </div>
            </div>
            <div style="flex-grow: 1"></div>
            <div style="display: flex; flex-direction: row; width: 100%">
              <!-- <div class="row" style="align-items: center">
                                <div v-if="coins > 0" class="row">
                                    <img
                                        src="@/views/activityPages/assets/ze-points.png"
                                        style="width: 16px; height: 16px"
                                    /><text class="moneyText" style="font-size: 16px"
                                        >{{ coins
                                        }}<text class="moneyText" style="font-size: 10px"
                                            >积分</text
                                        >
                                    </text>
                                </div>
                                <img
                                    v-if="coins > 0 && price > 0"
                                    src="@/views/activityPages/assets/add5464.png"
                                    style="width: 12px; height: 12px"
                                />
                                <text
                                    v-if="price > 0"
                                    class="moneyText"
                                    style="font-size: 18px; font-weight: bold"
                                    >{{ price }}￥</text
                                >

                                <text v-if="price <= 0 && coins <= 0" class="moneyTextFree"
                                    >免费</text
                                >
                            </div> -->
              <MoneyCard :coins="coins" :price="price"></MoneyCard>
              <div style="flex-grow: 1"></div>
              <CountButtons
                :on-count-change="onCountChange"
                width="25px"
              ></CountButtons>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 15px"></div>
      <div class="card">
        <div class="row" style="width: 100%">
          <text>商品总金额</text>
          <div style="flex-grow: 1"></div>
          <!-- <div class="row" style="align-items: center">
                        <div v-if="coins > 0" class="row">
                            <img
                                src="@/views/activityPages/assets/ze-points.png"
                                style="width: 16px; height: 16px"
                            /><text class="moneyText" style="font-size: 16px"
                                >{{ coinsTotal()
                                }}<text class="moneyText" style="font-size: 10px">积分</text>
                            </text>
                        </div>
                        <img
                            v-if="coins > 0 && price > 0"
                            src="@/views/activityPages/assets/add5464.png"
                            style="width: 12px; height: 12px"
                        />
                        <text
                            v-if="price > 0"
                            class="moneyText"
                            style="font-size: 18px; font-weight: bold"
                            >{{ amount() }}￥</text
                        >

                        <text v-if="price <= 0 && coins <= 0" class="moneyTextFree">免费</text>
                    </div> -->
          <MoneyCard :price="amount()" :coins="coinsTotal()"></MoneyCard>
          <div></div>
        </div>
      </div>
      <div style="height: 15px"></div>
      <div class="card">
        <div class="row" style="align-items: center">
          <text class="inputTitle">姓名：</text>
          <uni-easyinput
            v-model="value"
            placeholder="请输入姓名"
            class="input"
            :input-border="false"
          ></uni-easyinput>
        </div>
        <div class="divider"></div>
        <div class="row" style="align-items: center">
          <text class="inputTitle">联系方式：</text>
          <uni-easyinput
            v-model="value"
            placeholder="请联系方式"
            class="input"
            :input-border="false"
          ></uni-easyinput>
        </div>
      </div>
    </scroll-view>
    <div class="bottom">
      <div class="card">
        <div
          class="row"
          style="align-items: center; justify-content: end; width: 100%"
        >
          <div style="flex-grow: 1"></div>
          <text>合计：</text>
          <div class="row" style="align-items: center">
            <div v-if="coins > 0" class="row">
              <text class="moneyText" style="font-weight: bold"
                >{{ coinsTotal()
                }}<text class="moneyText" style="font-size: 10px">积分</text>
              </text>
            </div>
            <img
              v-if="coins > 0 && price > 0"
              src="@/views/activityPages/assets/add5464.png"
              style="width: 12px; height: 12px"
            />
            <text v-if="price > 0" class="moneyText" style="font-weight: bold"
              >{{ amount() }}￥</text
            >

            <text v-if="price <= 0 && coins <= 0" class="moneyTextFree"
              >免费</text
            >
          </div>
          <div style="width: 20px"></div>
          <div class="button" @click="onConfirm">立即预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request';
import { ref } from 'vue';

import { useStore } from 'vuex';
import CountButtons from '@/components/activity/count-buttons.vue';
import MoneyCard from '@/views/activityPages/components/money-card.vue';
const buyCount = ref(0);
const price = ref(10);
const coins = ref(10);
function coinsTotal() {
  return coins.value * buyCount.value;
}
// const amount = ref(100)
function amount() {
  return buyCount.value * price.value;
}
let params = {};
onLoad((e) => {
  console.log('fill order params=', e);
  params = e;
  buyCount.value = Number.parseInt(params.count, 10);
});
function onCountChange(i) {
  buyCount.value = i;
  // console.log('buyCount=', buyCount.value)
}
function onConfirm() {
  uni.navigateTo({
    url: '/views/activityPages/order/order-success',
  });
}
</script>

<style lang="scss" scoped>
.input {
  border: none;
}
.button {
  width: 116px;
  height: 35px;
  line-height: 20px;
  border-radius: 20px;
  background-color: rgba(236, 106, 45, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inputTitle {
  width: 70px;
  text-align: end;
}
.card {
  line-height: 20px;
  border-radius: 10px;
  background-color: white;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Roboto;
  padding: 10px;
  align-items: flex-start;

  display: flex;
  flex-direction: column;
}
.titleText {
  line-height: 17px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: bold;
}
.subText {
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.row {
  display: flex;
  flex-direction: row;
}
.moneyText {
  color: #e8592f;
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.moneyTextFree {
  color: #328c00;
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.divider {
  width: 999px;
  height: 2px;
  background-color: #f5f5f5;
  // border: 1px solid rgba(245, 245, 245, 1);
}
.bottom {
  position: fixed;
  bottom: calc(var(--window-bottom));
  z-index: 1030;
  margin-bottom: 0px;
  width: 100%;
}
</style>
